<template>
  <div class="footer">
    <div
      class="top-content"
      id="top-content"
    >
      <div class="top-content-left">
        <p class="top-content-left-p">服务热线</p>
        <p class="top-content-left-p color-p">0679-83988598</p>
        <div class="top-content-left-img">
          <img
            src="../assets/image/二维码.jpg"
          />
        </div>
      </div>
      <div
        class="top-content-middle"
        id="middle-content"
      >
        <div class="top-content-middle-content">
          <div
            class="top-content-middle-item"
            @click="jumpIndex"
          >
            <p class="top-content-middle-item-p">走进三汇</p>
            <p class="top-content-middle-item-text-p">集团介绍</p>
            <p class="top-content-middle-item-text-p">公司业务</p>
            <p class="top-content-middle-item-text-p">发展历程</p>
            <p class="top-content-middle-item-text-p">企业文化</p>
          </div>
          <div
            class="top-content-middle-item"
            @click="jumpServie"
          >
            <p class="top-content-middle-item-p">产品与服务</p>
            <p class="top-content-middle-item-text-p">专业人才外包</p>
            <p class="top-content-middle-item-text-p">劳动派遣服务</p>
            <p class="top-content-middle-item-text-p">人事代理服务</p>
            <p class="top-content-middle-item-text-p">招聘外包</p>
          </div>
          <div
            class="top-content-middle-item"
            @click="jumpCooperative"
          >
            <p class="top-content-middle-item-p">合作案例</p>
            <p class="top-content-middle-item-text-p">成功案例</p>
            <p class="top-content-middle-item-text-p">经典案例</p>
          </div>
          <div
            class="top-content-middle-item"
            @click="jumpNewsCenter"
          >
            <p class="top-content-middle-item-p">集团资讯</p>
            <p class="top-content-middle-item-text-p">行业动态</p>
            <p class="top-content-middle-item-text-p">企业新闻</p>
            <p class="top-content-middle-item-text-p">员工风采</p>
          </div>
          <div
            class="top-content-middle-item"
            @click="jumpJoinUs"
          >
            <p class="top-content-middle-item-p">招聘贤士</p>
            <p class="top-content-middle-item-text-p">内部招聘</p>
            <p class="top-content-middle-item-text-p">外部招聘</p>
          </div>
        </div>
      </div>
      <div class="top-content-right">
        <div class="top-content-right-item">
          <div class="top-content-right-item-icon">
            <img
              src="../assets/image/电话.png"
              width="100%"
              height="100%"
            >
          </div>
          <p class="top-content-right-item-p">0679-83988598</p>
        </div>
        <div class="top-content-right-item">
          <div class="top-content-right-item-icon">
            <img
              src="../assets/image/邮箱.png"
              width="100%"
              height="100%"
            >
          </div>
          <p class="top-content-right-item-p">dongguansanhui@163.com</p>
        </div>
        <div class="top-content-right-item">
          <div class="top-content-right-item-icon">
            <img
              src="../assets/image/网址.png"
              width="100%"
              height="100%"
            >
          </div>
          <p class="top-content-right-item-p">http://sanhuikj.com</p>
        </div>
        <div class="top-content-right-item">
          <div class="top-content-right-item-icon">
            <img
              src="../assets/image/地址.png"
              width="100%"
              height="100%"
            >
          </div>
          <p class="top-content-right-item-p">东莞市常平镇木棆村常平大道常平商会大厦写字楼7楼C座</p>
        </div>
      </div>
    </div>
    <div class="bottom-content">
      <div class="bottom-content-left">
        <p class="bottom-p">东莞市三汇人力资源公司</p>
        <p
          class="bottom-p left"
          @click="jump"
        >粤ICP备案20002504号-1</p>
      </div>
      <!-- <div class="bottom-content-right">
        <div class="icon"></div>
        <div class="icon"></div>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
  },
  methods: {
    jump() {
      window.open('http://beian.miit.gov.cn');
    },
    jumpIndex() {
      this.$router.push({ path: "/index" });
    },
    jumpServie() {
      this.$router.push({
        path: "/service",
        query: {
          key: '2-0'
        }
      });
    },
    jumpCooperative() {
      this.$router.push({ path: "/Cooperative" });
    },
    jumpNewsCenter() {
      this.$router.push({ path: "/News" });
    },
    jumpJoinUs() {
      this.$router.push({ path: "/joinUs" });
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  height: 200px;
  background-color: black;
  opacity: 0.8;
}
.top-content {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
}
.top-content-left {
  width: 140px;
  height: 140px;
  float: left;
  margin-top: 30px;
}
.top-content-left-p {
  width: 100%;
  height: 20px;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
.color-p {
  font-size: 16px;
  color: orange;
  margin-top:10px;
}
.top-content-left-img {
  width: 80px;
  height: 80px;
  margin-top: 10px; 
  img{
    width:100%;
    height:100%;
  }
}
.top-content-middle {
  width: 820px;
  height: 140px;
  float: left;
  margin-top: 30px;
  margin-left:40px;
}
.top-content-middle-content {
  width: 800px;
  height: 140px;
  margin: 0 auto;
}
.top-content-middle-item {
  width: 120px;
  height: 140px;
  margin-right: 40px;
  float: left;
  cursor: pointer;
}
.top-content-middle-item-p {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
}
.top-content-middle-item-text-p {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  margin-top: 10px;
  transition: all .45s;
  &:hover{
    color:#fff;
  }
}
.top-content-right {
  width: 200px;
  height: 140px;
  float: right;
  margin-top: 30px;
}
.top-content-right-item {
  width: 200px;

  height: 30px;
}
.top-content-right-item-icon {
  width: 14px;
  height: 14px;
  float: left;
  margin-top: 7px;
  img{
    width:14px;
    height:auto;
  }
}
.top-content-right-item-p {
  margin-left: 12px;
  width: 170px;
  float: left;
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.bottom-content {
  width: 100%;
  line-height: 35px;
  background-color: black;
  border-top: 1px solid rgba(277, 277, 277, 0.1);
}
.bottom-content-left {
  width: 280px;
  height: 35px;
  margin: 0 auto;
  font-size:12px;
}
.bottom-p {
  color: #fff;
  opacity: 0.5;
  float: left;
}
.left {
  cursor: pointer;
  color: #e3e3e3;
  opacity: 0.5;
  float:right;
}
.icon {
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background-color: red;
}

@media screen and (max-width: 800px) {
  .footer{
    height: auto;
    overflow: hidden;
    .top-content{
      width:100%;
      height:auto;
      overflow: hidden;
      box-sizing: border-box;
      padding:0 15px;
      .top-content-middle{
        display: none;
      }
      .top-content-left{
        width:50%;
        height:auto;
        overflow: hidden;
        margin-top:15px;
        .top-content-left-p{
          font-size:12px;
          line-height: 25px;
        }
        .top-content-left-img{
          margin-right: 0;
        }
      }
      .top-content-right{
        width:50%;
        height:auto;
        overflow: hidden;
        margin-top:15px;
        .top-content-right-item{
          width:100%;
          height:auto;
          overflow: hidden;
          display: flex;
          
          .top-content-right-item-icon{
            margin-top:0;
            line-height:25px;
          }
        }
        .top-content-right-item-p{
          width:auto;
          word-break: break-all;
          line-height:25px;
          font-size:12px;
        }
      }
    }
    .bottom-content{
      line-height: auto;
      display: flex;
      align-items: center;
      margin-top:15px;
    }
  }
}
</style>
